<template>
  <div>
    <h1>reactive函数使用</h1>
    <ul>
      <li>{{ obj }}</li>
      <li>{{ obj.name }}, {{ obj.age }}</li>
      <li @click="a++">{{ a }},{{ b }}</li>
    </ul>
    <button @click="changeObj">修改obj的name</button>
    <button @click="changeAge">修改obj的age</button>
    <button @click="obj.name = '小兰'">修改obj</button>
  </div>
</template>

<script>
/**
 * 使用步骤：
 * **使用步骤**
1. 从vue框架中导入`reactive`函数
2. 在setup函数中调用reactive函数并将对象数据传入
3. 在setup函数中把reactive函数调用完毕之后的返回值以对象的形式返回出去
注意：
1. 只能定义复杂类型
2. 不能修改整个对象（不能改地址）=> 不可变（react）
 */
import { reactive, toRefs } from 'vue'
export default {
  setup () {
    // 定义复杂类型变量=> 相当于vue2.0 data中定义一个obj对象
    const obj = reactive({ name: '小红', age: 18 })
    // 定义函数
    const changeObj = () => {
      obj.name = '小刚'
    }
    function changeAge () {
      obj.age = 28
    }
    const obj2 = reactive({ a: 1, b: 2 })
    // 定义简单类型变量(不能)
    // const count = reactive(0)
    // 问题：直接...obj2被解构的属性，没有响应式了
    return { obj, changeObj, changeAge, ...toRefs(obj2) }
  }
}
</script>

<style lang="scss" scoped>
</style>
